<template>
  <div > 
    <div>
      <el-form ref="form" size="mini" :model="form" label-width="90px" :rules="rules">                  
          <el-row> 
            <el-col :span="24">
              <el-form-item label="模块" prop="sysModule"> 
                <el-input  v-model="form.sysModule" :disabled="readFlag"></el-input>
              </el-form-item>
            </el-col> 
          </el-row>  
          <el-row>
            <el-col :span="24">
              <el-form-item label="保存路径" prop="sysSaveDir"> 
                <el-input  v-model="form.sysSaveDir" :disabled="readFlag"></el-input>
              </el-form-item>
            </el-col> 
          </el-row>  
          <el-row>
            <el-col :span="24">
              <el-form-item label="PID路径" prop="sysRunDir"> 
                <el-input  v-model="form.sysRunDir" :disabled="readFlag"></el-input>
              </el-form-item>
            </el-col>
          </el-row>  
          <el-row>
            <el-col :span="12">
              <el-form-item label="脚本类型" prop="shellType"> 
                <el-select  v-model="form.shellType" :disabled="readFlag">
                    <el-option v-for="item in shellTypeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否监控" prop="needMonitor"> 
                <el-select  v-model="form.needMonitor" :disabled="readFlag">
                    <el-option v-for="item in needMonitorList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>         
          <el-row>
            <el-col :span="24">
              <el-form-item label="启动脚本" prop="sysStartShell"> 
                <el-input  type="textarea" rows="10" v-model="form.sysStartShell" :disabled="readFlag"></el-input>
              </el-form-item>
            </el-col>           
          </el-row>          
        </el-form>
    </div>

    <div class="center mt">
      <el-button icon="el-icon-circle-close" size="mini" @click="$emit('close')">取 消</el-button>
      <el-button icon="el-icon-circle-plus-outline" :loading="saveLoading" type="primary" v-show="type!='view'" size="mini" @click="saveFn">保 存</el-button>
    </div>
  </div>
</template>

<script>
 
import * as api from "@/api/upgrade/packageBackendConfig"; 
export default {
  props:['type','row'],
  data() {
    return {  
      saveLoading:false,
      goon:false,
      readFlag:false,
      shellTypeList:[
        {"dictKey":"linux","dictValue":"linux"},
        {"dictKey":"window","dictValue":"window"},
      ],
      needMonitorList:[
        {"dictKey":"N","dictValue":"否"},
        {"dictKey":"Y","dictValue":"是"},        
      ],
      form:{
        id:'',  
        shellType:'linux',      
        needMonitor:'N',      
        sysSaveDir:'',
        sysRunDir:'',
        sysStartShell:'',
        sysStopShell:'',
      },
      rules: {  
        sysModule: [
          { required: true, message: '请输入模块', trigger: 'change',}
        ],     
        sysSaveDir: [
          { required: true, message: '请输入保存地址', trigger: 'change',}
        ],  
        sysRunDir: [
          { required: true, message: '请输入保存pid目录', trigger: 'change',}
        ],      
        shellType: [
          { required: true, message: '请选择', trigger: 'change',}
        ], 
        sysStartShell: [
          { required: true, message: '请输入启动脚本', trigger: 'change',}
        ]
      },
      props: {
        label: 'dictValue',
        value: 'dictKey'
      }, 
      loadings: false,
      index:0,      
    };
  },
  mounted() {
    this.initDict(); 
    
    if(this.type == 'edit' || this.type == 'view'){
      this.form = {
        ...this.row,
      }
    } 
  },
  methods: {
    initDict(){      
      if(this.type == 'view'){
        this.readFlag = true;
      } else {
        this.readFlag = false;
      }
    },     
    saveFn() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let row= {
            ...this.form,
          }
          this.saveLoading = true
          if(this.type == 'add'){
            api.add(row).then(
              () => {
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                });
                this.saveLoading = false;
                this.$emit('reload')
              },
            ).catch(()=>{ 
              this.saveLoading = false;
            });
          }else{ 
            api.update(row).then(
              () => {
                this.$message({
                  type: 'success',
                  message: '操作成功!',
                });
                this.saveLoading = false;
                this.$emit('reload')
              },
            ).catch(()=>{ 
              this.saveLoading = false;
            });
          }
        }
      }); 
    },
  } 
};
</script>

<style>
.avue-crud__pagination {
  margin-top: 0;
  padding: 0;
}
.option_item {
  flex-shrink: 0;
  height: 28px;
  line-height: 28px;
  padding: 2px 20px;
}
</style>
